<template>
	<div>
	  <van-popup
		  v-model="showCode"
		  position="bottom"
		  :style="{ height: '100%',width:'100%'}"
	  >
	     <div class="codeMask">
	     	<div class="cancleIcon">
	     		<img src="../../../../static/img/lanhu/63.png" alt="" 
	     			style="width: 20px;height: 20px;border:1px dashed #fff" @click="showCode=false"/>
	     	</div>
	     	<div class="code">
	     		<div class="container">
	     			<div style="padding: 30px 0 25px;text-align: center;">
	     				<img src="../../../../static/img/lanhu/18.png" alt="" style="width: 50%;"/>
	     			</div>
	     			<div id="qrcode" ref="qrcode" style="display: flex;justify-content: center;"></div>
	     			<div style="margin-top: 25px;display: flex;justify-content: center;">
	     				<img :src="img" alt="" style="width: 50px;height: 50px;display: block;border-radius: 2px;"/>
	     			</div>
	     			<div style="padding: 10px 30px 35px;text-align: center;font-size: 16px;">{{name}}</div>
	     		</div>
	     	</div>
	     	
	     	<div class="shareWrap" style="padding-bottom: 20px;">
	     		<div class="left">
	     			<div style="width: 48px;height: 48px;display: flex;justify-content: center;">
		     			<img src="../../../../static/img/lanhu/12.png" alt="" style="width: 42px;height: 42px;"/>
	     			</div>
	     			<span style="color: #fff;margin-top: 5px;opacity: 0.8;">保存图片</span>
	     		</div>
	     		<div class="right">
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/15.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">微信</span>
	     			</div>   
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/61.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">朋友圈</span>
	     			</div> 
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/62.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">圈子</span>
	     			</div> 	     			
	     		</div>
	     	</div>
	     </div>
	  </van-popup>	
	</div>	
</template>

<script>
import QRCode  from "qrcodejs2"		
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
          showCode:false,
          isFirst:true,  // 判断是否第一次显示二维码
          linkUrl: 'http://192.168.10.208:8080/market/goods/detail?t=1590369092649&userId=2029375&comId=10106',// 二维码地址
       }
	},
	props:['img','name'],
	methods: {	
		showCodeMask(){
			this.showCode=true
			if(this.isFirst){
			    this.$nextTick (function () {
			       this.qrcode();
			    })
			    this.isFirst=false
			}
		},
	    qrcode () {
	        let that = this;
	        let qrcode = new QRCode('qrcode', {
	            width: 120,
	            height: 120,        // 高度
	            text:this.linkUrl
	        })
	    }      
	},
	mixins:[publicFun],//混入		
	mounted() {

	}
}	
</script>

<style scoped="" lang="scss">

.shareWrap{padding: 0 15px;margin-top: 30px;display: flex;
    .left{display: flex;flex-direction: column;padding-right: 24px;border-right: 1px solid rgba(255,255,255,0.7);}
    .right{display: flex;
    	.section{display: flex;flex-direction: column;text-align:center;margin-left: 10px;
    	   img{width: 45px;height: 45px;display: block;}
    	}
    }
}
.mask{background: #000;width: 100%;min-height: 100%;
	.footer{background: #fff;width: 100%;padding: 12px 0;font-size: 16px;text-align: center;margin-top: 18px;}
}
.cancleIcon{padding: 32px 25px 0;}
.code{padding: 32px 25px 0;.container{background: #fff;}}
.van-popup{background: rgba(0,0,0,0.2);}
</style>